<template>
  <view>
    <view class="root" v-if="!visibleCamera">
      <view class="content-wrapper">
        <u-form :model="form" ref="form" label-width="120" error-type="none">
          <u-form-item label="负责人类型" borderBottom :required="true"
            @click="hadleShowPicker('houseOwnerType', 'trusteeship')">
            <u--input v-model="form.trusteeship_text" disabled disabledColor="#ffffff" placeholder="请选择"
              border="none"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item v-if="form.trusteeship == '1'" label="与房主关系" borderBottom :required="true"
            @click="hadleShowPicker('homeowner_relationship', 'userType')">
            <u--input v-model="form.userType_text" disabled disabledColor="#ffffff" placeholder="请选择"
              border="none"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item label="国籍" borderBottom required @click="hadleShowPicker('nationality', 'nationality')">
            <u--input v-model="form.nationality_text" disabled disabledColor="#ffffff" placeholder="请选择"
              border="none"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item label="证件类型" borderBottom required @click="hadleShowPicker('certificate_type', 'idType')">
            <u--input v-model="form.idType_text" disabled disabledColor="#ffffff" placeholder="请选择"
              border="none"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item label="证件号码" borderBottom :required="true">
            <u--input :type="form.idType == 10 ? 'idcard' : 'text'" :maxlength="18" v-model="form.idCard"
              placeholder="请填写" border="none" @blur="handleIdCardChange"></u--input>
            <view v-show="form.idType == 10" slot="right">
              <u-icon size="21" name="scan" color="#2488F5" @click="handleCamera"></u-icon>
            </view>
          </u-form-item>
          <u-form-item label="姓名" borderBottom :required="true">
            <u--input v-model="form.userName" placeholder="请填写" border="none"></u--input>
          </u-form-item>
          <u-form-item label="联系电话" borderBottom :required="true">
            <u--input v-model="form.phone" type="number" :maxlength="11" placeholder="请填写" border="none"></u--input>
          </u-form-item>
          <u-form-item label="民族" borderBottom required @click="hadleShowPicker('nation', 'nation')">
            <u--input v-model="form.nation_text" disabled disabledColor="#ffffff" placeholder="请选择"
              border="none"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <!-- <u-form-item label="户籍地址" borderBottom required>
            <u--input v-model="form.residenceAddress" placeholder="请填写" border="none"></u--input>
          </u-form-item>
          <u-form-item label="户籍所属省市区" required @click="cityPickerVisible = true">
            <u--input v-model="form.hjssxqbm_text" disabled disabledColor="#ffffff" placeholder="请选择"
              border="none"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <view class="hint" style="font-size: 20rpx; color: #f56c6c;" v-if="areaList.length">
            户籍所属区县由系统自动匹配，如匹配不准确或未匹配到请务必手动修改!
          </view> -->
        </u-form>
      </view>
      <view class="button-wrapper">
        <view class="cancel btn-item" @click="handleCancel">取消</view>
        <view class="submit btn-item" @click="submitHandle">提交</view>
      </view>
      <u-picker closeOnClickOverlay :show="pickerShow" :columns="pickerData" keyName="text" @confirm="onPickerConfirm"
        @cancel="onPickerCancel" @close="onPickerClose"></u-picker>
      <!--   <yy-city-picker :visible="cityPickerVisible" @confirm="onCityConfirm" @cancel="cityPickerVisible = false"
        default-value="420111"></yy-city-picker> -->

      <yy-city-picker-all :visible="cityPickerVisible" @confirm="onCityConfirm" @cancel="cityPickerVisible = false"
        :default-value="defaultCityCode"></yy-city-picker-all>
    </view>

    <yy-photo-mask :visible.sync="visibleCamera" :baseImgUrl="baseImgUrl" :clientId="clientId"
      :clientSecret="clientSecret" @parsedSuccess="onParsedSuccess">
    </yy-photo-mask>
    <lingfeng-timepicker ref="datetimePickerRef" type="date" :defaultData="defaultData" :minDate="minDate"
      :maxDate="maxDate" @change="timeChange"></lingfeng-timepicker>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    postAction
  } from "../../utils/request";
  import {
    checkIDCard,
    navBack,
    parseIDCard,
    setDefaultProvinceCode,
    Toast,
    uniTrim
  } from "../../utils/util";
  import _ from '@/utils/lodash.js'
  import moment from "@/utils/moment";

  export default {
    data() {
      return {
        clientId: this.$clientId,
        clientSecret: this.$clientSecret,
        baseImgUrl: this.$baseImgUrl,
        pickerWithFormKey: "",
        form: {
          nation: "",
          idCard: "",
          phone: "",
          userName: "",
          userType: "",
          trusteeship: "",
          // residenceAddress: ''
          nationality: 'CHN',
          nationality_text: '中国',
          idType: '10',
          idType_text: '身份证',
        },
        cityPickerVisible: false,
        pickerShow: false,
        pickerData: [
          []
        ],
        dictMapping: {
          houseOwnerType: [{
              text: "托管人",
              value: "1",
            },
            {
              text: "房主本人",
              value: "0",
            },
          ],
        },
        options: {},
        visibleCamera: false,
        areaList: [],
        defaultCityCode: '',
        // 日期相关的
        defaultData: {
          startTime: moment(new Date()).format('YYYY-MM-DD')
        },
        minDate: {
          year: 1800,
          month: 1,
          date: 1
        },
        maxDate: {
          year: new Date().getFullYear(),
          month: new Date().getMonth() + 1,
          date: new Date().getDate()
        },
        datetimePickerRef: null
      };
    },
    watch: {
      "form.trusteeship": function() {
        this.$set(this.form, "userType_text", "");
        this.$set(this.form, "userType", "");
      }
    },
    onLoad(options) {
      this.options = options;
      this.initDict();
    },
    methods: {
      handleIdCardChange() {
        let params = {
          idCard: this.form.idCard,
          fDzbm: this.options.buildingId
        }

      },
      handleCancel() {
        navBack();
      },
      initDict() {
        let allCode = uni.getStorageSync("allCode");
        Object.assign(this.dictMapping, allCode);
      },
      hadleShowPicker(dictName, formKey) {
        this.pickerWithFormKey = formKey;
        this.pickerData[0] = this.dictMapping[dictName] || [];
        this.pickerShow = true;
      },
      onPickerCancel() {
        this.pickerShow = false;
      },
      onPickerClose() {
        this.pickerShow = false;
      },
      onPickerConfirm(data) {
        let {
          value,
          text
        } = data.value[0];
        this.form[this.pickerWithFormKey] = value;
        this.$set(this.form, `${this.pickerWithFormKey}_text`, text);
        this.pickerShow = false;
      },
      onCityConfirm(event) {
        // this.form.hjssxqbm_text = event.address;
        // this.form.hjssxqbm = event.code;
        this.cityPickerVisible = false;
      },
      async submitHandle() {
        let params = {
          ...this.form,
          ...this.options,
          isMain: 0,
        };
        if (!this.form.trusteeship) {
          Toast("请选择负责人类型！");
          return;
        }
        if (this.form.trusteeship == "1" && !this.form.userType) {
          Toast("请选择与房主关系！");
          return;
        }
        if (!this.form.nationality) {
          Toast("请选择国籍！");
          return;
        }
        if (!this.form.idType) {
          Toast("请选择证件类型！");
          return;
        }
        if (!this.form.idCard) {
          Toast("请填写证件号码！");
          return;
        }
        let idCardFlag = checkIDCard(this.form.idCard);
        if (!idCardFlag && this.form.idType == 10) {
          Toast("请输入正确的身份证号码！");
          return;
        }
        if (!this.form.userName) {
          Toast("请填写姓名！");
          return;
        }
        if (!this.form.phone) {
          Toast("请填写联系电话！");
          return;
        }
        if (!this.$u.test.mobile(this.form.phone)) {
          Toast("请输入正确的联系电话！");
          return;
        }
        if (!this.form.nation) {
          Toast("请选择民族！");
          return;
        }
        // if (!this.form.residenceAddress || !uniTrim(this.form.residenceAddress)) {
        //   Toast("请填写户籍地址！");
        //   return;
        // }
        // if (!this.form.hjssxqbm) {
        //   Toast('请选择户籍所属区县！')
        //   return
        // }
        await postAction(`/indeed/house/addPoliceHouseMain`, params);
        Toast("提交成功！");
        navBack();
      },
      handleCamera() {
        this.visibleCamera = true;
      },
      onParsedSuccess({
        userName,
        idcard,
        domicileAddress,
        nation
      }) {
        this.form.idCard = idcard;
        this.form.userName = userName;
        // this.form.residenceAddress = domicileAddress
        this.handleIdCardChange()
        // 民族，默认选中
        let nationText = `${nation}族`;
        let nationOption = this.dictMapping["nation"].find(
          (item) => item.text === nationText
        );
        if (nationOption) {
          this.form.nation_text = nationOption.text;
          this.form.nation = nationOption.value;
        }
      },
      handleShowDatetimePicker(type) {
        this.$refs.datetimePickerRef.show()
      },
    },
  };
</script>

<style lang="scss">
  page {
    background: #f9f9f9;
  }
</style>
<style lang="scss" scoped>
  @import url("../../styles/form.scss");

  .root {
    padding: 20rpx;

    .content-wrapper {
      width: 100%;
      background: #ffffff;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 0 26rpx;
      padding-bottom: 40rpx;
    }

    .button-wrapper {
      position: fixed;
      bottom: 0;
      left: 0;
      height: 120rpx;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      z-index: 10;
      padding: 0 35rpx;

      .btn-item {
        width: 324rpx;
        height: 88rpx;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .cancel {
        background: #ebebeb;
      }

      .submit {
        background: #2488f5;
        color: #fff;
      }
    }
  }
</style>